<template>
  <view class="analysis" v-if="recipe.energy">
		
	  <view class="fenxi">- 营养分析 -</view>

      <view class="xijie">
        <uni-row class="demo-uni-row" >
            <uni-col :span="18" class="left">
                <uni-col :span="8" class="icon">
                    <!-- <canvas width="80" height="75" class="canvas demo-uni-col" ref="canvas">不支持canvas画布标签</canvas> -->
					<canvas class="canvas demo-uni-col" style="width: 80px; height: 75px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
                </uni-col>
                <uni-col :span="10" class="list">
                    <view v-for="(item,index) in recipe.nutrition_facts" :key="index">
                        <text class="dot demo-uni-col" :style="{backgroundColor:item.pie_chart_color}"></text>
                        <text>{{item.nutrient}}</text>
                    </view>
                </uni-col>
				<uni-col :span="6" class="math">
                    <view  v-for="(item,index) in recipe.nutrition_facts" :key="index">{{item.amount}}</view>
                </uni-col>
            </uni-col>
            <uni-col :span="4" class="right">
                <view class="energy">{{recipe.energy}}</view>
                <view class="qk">千卡</view>
            </uni-col>
        </uni-row>
	  </view>

  </view>
</template>

<script>
export default {
    props:["recipe"],
    data() {
        return {
            src_id: null,
        };
    },
    mounted(e){
		const ctx = uni.createCanvasContext('firstCanvas',this);
        var data = this.recipe.nutrition_facts.map(item => item.calorie);
        var color = this.recipe.nutrition_facts.map(item => item.pie_chart_color);
        // 获取画布的宽度
        var canvasWidth = 80;
        // 获取画布的高度
        var canvasHeight = 75;

        // 圆心坐标
        var x = canvasWidth / 2;
        var y = canvasHeight / 2;
        // 半径
        var radius = 35;
        // 一共多少份
        var num = data.length;
        // 每份的弧度
        // 当前数据/(总数据) = 当前数据所占比/360
        // 当前数据所占比 = 当前数据/(总数据)*360* (1 / 180 * Math.PI)
        //求和
        var long = 0;
        for( var i = 0; i < num; i++){
            long += data[i];
        }

        // 开始弧度
        var startAngle = -90;
        // 结束弧度
        var endAngle = -90;
        var angle = 0;
        for (var j = 0; j < num; j++) {
            // 当前angle
            angle = data[j]/long * 360 * (1 / 180 * Math.PI);
            // 计算结束弧度
            endAngle += angle;

            ctx.beginPath();
            ctx.moveTo(x-5, y);
            ctx.arc(x-5, y, radius, startAngle, endAngle);
            ctx.setFillStyle(color[j]);
            ctx.fill();
            ctx.closePath();
			console.log(color[j])
            // 上一个扇形的结束弧度,就是下一个扇形开始的弧度
            startAngle = endAngle;
        }
        ctx.beginPath();
        ctx.moveTo(x-5,y);
        ctx.arc( x-5,y, radius/2, 0, 2*Math.PI);
        ctx.setFillStyle("white");
        ctx.fill();
        ctx.closePath();
		
		ctx.draw(true,()=>{
			console.log("绘制完成")
		});
    },
    methods:{
        getDetailList(){
            console.log(this.$route.query.id);
            this.src_id = this.$route.query.id;
        },
        
    }
}
</script>

<style lang="less">
.analysis{
	padding-left: 15px;
	.fenxi{
		text-align: center;
		font-size: 16px;
		font-weight: 600;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.xijie{
		.demo-uni-col{
			display: inline-block;
			height: 12px;
			width: 12px;
			border-radius: 50%;
			// background-color: pink;
			margin-right: 10px;
			vertical-align: middle;
			margin-bottom: 4px;
			text-align: center;
		}
		.energy{
			margin-top: 8px;
			font-size: 20px;
			font-weight: 700;
			color: black;
			text-align: center;
		}
		.qk{
			text-align:center;
		}
		// padding: 15px;
		.demo-uni-row {
			
			/* QQ、字节小程序文档写有 :host，但实测不生效 */
			/* 百度小程序没有 :host，需要设置block */
			/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
			display: block;
			/* #endif */
		}
		
		/* 支付宝小程序没有 demo-uni-row 层级 */
		/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
		/* #ifdef MP-ALIPAY || MP-WEIXIN */
		/deep/ .uni-row {
			margin-bottom: 10px;
		}
		/* #endif */
		
		// .demo-uni-col {
		// 	height: 36px;
		// 	border-radius: 4px;
		// }
		
		.dark_deep {
			background-color: #99a9bf;
		}
		
		.dark {
			background-color: #d3dce6;
		}
		
		.light {
			background-color: #e5e9f2;
		}
		
		padding-bottom: 0;
		.van-nav-bar .van-nav-bar__content{
			  background-color: white;
			  height: 60px;
		  }
		 .van-nav-bar .van-nav-bar__content  .van-icon{
			  color: #000;
		  }
		 .van-nav-bar__title{
			 margin-left: 35px;
		 }
		.iframesty{
			position: fixed;
			top: 60px;
			left: 0;
			height: 100vh;
			width: 100vw;
			z-index: 100;
			background-color: white;
		}
		.nutrition{
			// background-color: white;
			height: 40px;
			line-height: 40px;
			.link{
				color: #50969f;
			}
			.mode1{
				font-weight: 600;
				font-size: 16px;
				 margin-left: 15px;
			}
			.mode2{
				font-size: 13px;
				 margin-right: 15px;
			}
		}
		.xijie{
			padding: 0 15px;
			// padding-bottom: 0;
			display: flex;
			align-items: center;
			.left{
				line-height: 25px;
				.list{
					font-size: 12px;
					color: #828282;
					.dot{
						display: inline-block;
						height: 12px;
						width: 12px;
						border-radius: 50%;
						background-color: pink;
						margin-right: 10px;
						vertical-align: middle;
						margin-bottom: 4px;
					}
				}
				.math{
					font-size: 13px;
					font-weight: 600;
				}
			}
			.right{
				border-left: 1px solid #dfdcdc;
				font-size: 15px;
				color: #828282;
				display: flex;
				flex-direction: column;
				align-items: center;
				.energy{
					font-size: 20px;
					font-weight: 700;
					color: black;
				}
			}
		}
		.text{
			font-size: 14px;
			font-weight: 600;
			padding: 0 15px;
		}
	}
	
}
</style>